<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :pagination="false" :request-api="getSmallList" :init-param="initParams">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)">新增子分类</el-button>
        <el-button type="danger" @click="deleteIds(scope.selectedListIds)" :disabled="scope.selectedListIds.length !== 0"
          >批量删除</el-button
        >
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link :icon="Search" @click="go(row)">查看</el-button>
        <el-button type="primary" link :icon="EditPen" @click="opera(row)">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteIds([row.id])">删除</el-button>
      </template>
    </ProTable>
    <category ref="cateRef"></category>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ref, reactive } from "vue";
import { getSmallList, editSmallApi, createSmallApi, deleteSmallApi } from "@/api/modules/about";
import { EditPen, Delete, Search } from "@element-plus/icons-vue";
import category from "../components/category.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

const route = useRoute();

const cateRef = ref<InstanceType<typeof category> | null>();

const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "selection", width: 80 },
  { prop: "sort", label: "排序值" },
  { prop: "name", label: "分类名称" },
  { prop: "introduce", label: "分类介绍" },
  { prop: "opera", label: "操作" }
];

const initParams = reactive({ id: parseInt(route.query.id as string) });

const opera = (row: any) => {
  const params: any = {
    row: row ? row : { name: "", sort: 1, category: parseInt(route.query.id as string), introduce: "" },
    api: row ? editSmallApi : createSmallApi,
    getTable: proRef.value?.getTableList,
    isNeedIntroduce: true
  };
  cateRef.value?.acceptParams(params);
};

const deleteIds = async (ids: any) => {
  try {
    await useHandleData(deleteSmallApi, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};

const go = (row: any) => {
  router.push({ name: "AboutArticle", query: { id: row.id } });
};
</script>

<style></style>
